<template>

	<view class="select-box">
		<text class="tab-title">日期</text>
		<view class="titme-box">

			<uni-datetime-picker :clear-icon="false" :placeholder="timetext1" type="date" :value="timetext1"
				start="2021-3-20" @change="change1" />
		</view>
		<text class="concatTime">至</text>
		<view class="titme-box">

			<uni-datetime-picker :clear-icon="false" :placeholder="timetext2" type="date" :value="timetext2"
				start="2021-3-20" @change="change2" />
		</view>
	</view>


</template>

<script setup>
	import {
		getTimeDate
	} from "../../utils/index.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		onMounted,
		defineExpose
	} from "vue"
	const pramas = reactive({
		start_date: [],
		end_date: [],
		type: '',
		value: ''
	})
	const time1 = ref(false);
	const time2 = ref(false)
	const timetext1 = ref(0)
	const timetext2 = ref(0)
	const emit = defineEmits(['emitTime'])

	onMounted(() => {
		// getTimeDate()  
		let time = getTimeDate()
		pramas.endTime = [time.year, time.month, time.day]
		pramas.startTime = [time.year, time.month, time.day]
		timetext1.value = `${time.year}-${time.month}-${time.day}`
		timetext2.value = `${time.year}-${time.month}-${time.day}`
		emitTime()
		// console.log(time)
	})
	const clearData = () => {

	}
	const change1 = (e) => {
		console.log(timetext1.value, e)
		timetext1.value = e
		// time1.value = false
		// console.log(pramas.start_date)
		// timetext1.value = `${pramas.start_date[0]}/${Number(pramas.start_date[1])}/${Number(pramas.start_date[2])}`
		emitTime()
		// console.log(pramas.startTime)
	}
	const change2 = (e) => {
		timetext2.value = e
		// time2.value = false 
		// timetext2.value = `${pramas.end_date[0]}/${Number(pramas.end_date[1])}/${Number(pramas.end_date[2])}`
		emitTime()
	}
	const emitTime = () => {
		let str1 = timetext1.value.replace(/-/g, "/")
		let str2 = timetext2.value.replace(/-/g, "/")
		console.log({
			start_date: str1,
			end_date: str2
		})
		emit('emitTime', {
			start_date: str1,
			end_date: str2
		})
	} 
	defineExpose({ 
		clearData
	})
</script>

<style lang="scss" scoped>
	

	.heard {
		display: flex;
		flex-direction: column; 
		align-items: center;
		width: 100%;
		height: auto;
		background: rgba(255, 255, 255, 1);
		padding-bottom: 28rpx;
	}

	.select-box {
		position: relative;
		z-index: 999;
		display: flex;
		align-items: center;
		width: 670rpx;

		.tab-title { 
			width: 59.84rpx; 
			height: 42rpx; 
			font-size: 28.04rpx;
			line-height: 40.6rpx;
			color: rgba(0, 0, 0, 1);

		}

		.titme-box { 
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 78.86rpx;
			opacity: 1;
			border-radius: 10.51rpx;
			background: rgba(255, 255, 255, 1);
			// border: 1.75rpx solid rgba(252, 247, 247, 1);
			.uni-date{
				width: 100%;
				height: 100%;
			}
		}

		.time-icon {
			width: 42.06rpx;
			height: 42.06rpx;
			margin-right: 13rpx;
		}

		.concatTime {
			margin-left: 22rpx;
			margin-right: 11rpx;
			font-size: 28.04rpx;
			line-height: 40.6rpx;
			color: rgba(102, 102, 102, 1);

		}

	}

	.wrapper {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 100vw;
		height: 100%;

	}
</style>